import React from 'react';
import { Card, Table } from 'antd';

// 模拟流量统计数据
const trafficData = [
  { key: '1', source: '搜索引擎', pv: 12500, uv: 8500, bounceRate: '45.2%', avgStayTime: '2:30', date: '2023-05-10' },
  { key: '2', source: '直接访问', pv: 8500, uv: 6200, bounceRate: '32.8%', avgStayTime: '3:15', date: '2023-05-10' },
  { key: '3', source: '社交媒体', pv: 6800, uv: 5400, bounceRate: '52.4%', avgStayTime: '1:45', date: '2023-05-10' },
  { key: '4', source: '外部链接', pv: 4200, uv: 3100, bounceRate: '68.1%', avgStayTime: '1:20', date: '2023-05-10' },
  { key: '5', source: '广告投放', pv: 9500, uv: 6800, bounceRate: '48.7%', avgStayTime: '2:10', date: '2023-05-10' },
];

// 定义表格列
const trafficColumns = [
  { title: '来源渠道', dataIndex: 'source', key: 'source' },
  { title: '页面浏览量(PV)', dataIndex: 'pv', key: 'pv' },
  { title: '独立访客(UV)', dataIndex: 'uv', key: 'uv' },
  { title: '跳出率', dataIndex: 'bounceRate', key: 'bounceRate' },
  { title: '平均停留时间', dataIndex: 'avgStayTime', key: 'avgStayTime' },
  { title: '统计日期', dataIndex: 'date', key: 'date' },
];

const TrafficStatistics: React.FC = () => {
  return (
    <div>
      <h1 style={{ marginBottom: '24px' }}>流量统计详情</h1>
      <Card variant="outlined">
        <div style={{ padding: '20px 0', display: 'flex', justifyContent: 'center' }}>
          <p style={{ fontSize: '18px', color: '#666' }}>网站流量来源分布图表</p>
        </div>
        <Table 
          columns={trafficColumns} 
          dataSource={trafficData} 
          pagination={{ pageSize: 10 }} 
          rowKey="key"
        />
      </Card>
    </div>
  );
};

export default TrafficStatistics;